/** 软件地图浮动部件
 * Author:      huoxj 
 * CreateTime:  2023/10/21 16:13:08 
 * LastEditor:  huoxj 
 * ModifyTime:  2023/12/5 19:31:34 
 * Description: 
*/ 
<template>
  <div>
      <a-row :gutter="0">
        <a-col class="widget_container">
          <div class="widget_box">
            <div class="widget-box-icon"><img src="/images/software/软件.png" style="height: 32px; width: 32px;" /></div>
            <div class="widget-box-main">
              <div class="widget-box-title">软件数量</div>
              <div class="widget-box-num">{{showData.softNum}}</div>
            </div>
          </div>
          <div class="widget_box">
            <div class="widget-box-icon"><img src="/images/software/模块.png" style="height: 32px; width: 32px;" /></div>
            <div class="widget-box-main">
              <div class="widget-box-title">模块数量</div>
              <div class="widget-box-num">{{showData.moduleNum}}</div>
            </div>
          </div>
          <div class="widget_box">
            <div class="widget-box-icon"><img src="/images/software/许可.png" style="height: 32px; width: 32px;" /></div>
            <div class="widget-box-main">
              <div class="widget-box-title">许可数量</div>
              <div class="widget-box-num">{{showData.licenseNum}}</div>
            </div>
          </div>

          <div class="widget_box">
            <div class="widget-box-icon"><img src="/images/software/用户.png" style="height: 32px; width: 32px;" /></div>
            <div class="widget-box-main">
              <div class="widget-box-title">用户数量</div>
              <div class="widget-box-num">{{showData.userNum}}</div>
            </div>
          </div>

        </a-col>

        <a-col class="widget_container">
          <div class="widget_box">
            <div class="widget-box-icon"><img src="/images/software/访问数.png" style="height: 32px; width: 32px;" /></div>
            <div class="widget-box-main">
              <div class="widget-box-title">累计访问</div>
              <div class="widget-box-num">{{showData.allVisitNum}}</div>
            </div>
          </div>

          <div class="widget_box">
            <div class="widget-box-icon"><img src="/images/software/访问数.png" style="height: 32px; width: 32px;" /></div>
            <div class="widget-box-main">
              <div class="widget-box-title">本月访问</div>
              <div class="widget-box-num">{{showData.monthVisitNum}}</div>
            </div>
          </div>

          <div class="widget_box">
            <div class="widget-box-icon"><img src="/images/software/访问数.png" style="height: 32px; width: 32px;" /></div>
            <div class="widget-box-main">
              <div class="widget-box-title">当天访问</div>
              <div class="widget-box-num">{{showData.todayVisitNum}}</div>
            </div>
          </div>
        </a-col>
    </a-row>
  </div>
</template>
<script setup lang="ts">
import {ref, Ref, reactive, watchEffect, onMounted, watch, nextTick} from 'vue';
  import { useECharts } from '/@/hooks/web/useECharts';
import {defHttp} from "/@/utils/http/axios";

  const emit = defineEmits(['onBeforeFullscreen']);
  let showData = ref({
    softNum :0,
    moduleNum :0,
    licenseNum :0,
    userNum :0,
    allVisitNum :0,
    monthVisitNum :0,
    todayVisitNum :0,
  })
onMounted(() => {
  let list = []
  let api = "/software/softNumber";
  let params = {};
  let options = {isTransformResponse: false};
  defHttp.get({url: api, params}, options)
    .then((res) => {
      if (res.success) {
        showData.value = res.result
      } else {
        console.log('接口错误用默认');
      }
    })
  // initCharts();
});

</script>
<style>
.widget_container{
  font-size: 16px;
  display: flex;
  flex-direction: column;
  width: 160px;
  align-items: flex-end;
  justify-content: flex-end;
}

.widget_box {
  display: flex; 
  flex-direction: row; 
  justify-content: start; 
  align-items: center;
  padding: 2px;
  font-size: 14px;
  border-radius: 6px;
  border: #172c51 solid 1px;
  margin-top: 8px;
  background-color: rgba(0,60,153,0.5);
}

.widget-box-main {
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  align-items: flex-end;
  margin-left:16px;
  padding-right: 8px;
}
.widget-box-icon {
  padding: 8px;
  background-color: transparent;
}

.widget-box-title {
  color: white;
  font-size: 15px;
}

.widget-box-num {
  color: #efec05;
  font-size: 16px;
  font-weight: bold;
}
</style>
